<template>
	<!-- 导航栏容器，使用固定定位确保始终在顶部 -->
	<view class="container">
		<view class="top-navigation-bar" :style="{ height: `40px`, backgroundColor: bgColor, paddingTop: `${navHeight}px` }">
			<view v-if="showBack" class="back-button" @click="handleBack">
				<uni-icons type="left" size="24" color="#333"></uni-icons>
			</view>
			<!-- 标题区域 -->
			<text class="title" :style="{ color: titleColor }">
				{{ title }}
			</text>
		</view>
		<view class="tempBox" :style="{ height: `${navHeight + 40}px` }"></view>
	</view>
</template>

<script>
export default {
	props: {
		title: {
			type: String,
			default: '导航标题' // 默认标题
		},
		showBack: {
			type: Boolean,
			default: true
		},
		navHeight: {
			type: Number,
			default: 40
		},
		bgColor: {
			type: String,
			default: '#F8F8F8'
		},
		titleColor: {
			type: String,
			default: '#000'
		},
		customBack: {
			type: Function,
			default: null
		}
	},
	methods: {
		handleBack() {
			if (this.customBack) {
				// 如果有自定义返回函数，则执行
				this.customBack();
				return;
			}

			// 获取当前页面栈
			const pages = getCurrentPages();
			if (pages.length > 1) {
				// 如果页面栈中有页面，则返回上一页
				uni.navigateBack();
			} else {
				// 如果是首页或没有上一页，则根据情况处理
				if (window.history && window.history.length > 1) {
					// H5环境下，使用浏览器返回
					window.history.back();
				} else {
					// 如果无法返回，可以跳转到首页或其他指定页面
					uni.switchTab({
						url: '/pages/index/index'
					});
				}
			}
		}
	}
};
</script>

<style scoped>
.top-navigation-bar {
	position: fixed; /* 固定定位 */
	top: 0;
	left: 0;
	width: 100%; /* 全屏宽度 */
	z-index: 1000; /* 确保在最上层 */
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
	/* padding-top: var(--status-bar-height); */
}

.title {
	font-size: 17px; /* 标准标题字号 */
	font-weight: 500; /* 中等字重 */
	letter-spacing: 0.5px; /* 轻微字间距提高可读性 */
}

.back-button {
	position: absolute;
	left: 5px;
	padding: 8px;
}

.tempBox {
	width: 100%;
}
</style>
